<template>
	<view class="chat-item-wrap" :style="wrapStyle">
		<avatar :txt="data.role === 'user' ? 'A' : 'R'"></avatar>
		<view class="message-box" :style="messageBoxStyle">
			<message :content="data.content" />
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import Avatar from './avatar.vue'
	import { upx2px } from '@/utils/unit-convert.js'
  import Message from "./message.vue";
	
	const props = defineProps({
		data: Object
	})
	
	const wrapStyle = computed(() => {
		const style = {}
		const padding = upx2px(80)
		
		if (props.data.role === 'user') {
			style.flexDirection = 'row-reverse'
			style.paddingLeft = padding
		}  else {
			style.flexDirection = 'row'
			style.paddingRight = padding
		}
		
		return style
	})
	
	const messageBoxStyle = computed(() => {
		const style = {}		 
		const margin = upx2px(20)
		
		if (props.data.role === 'user') {
			style.marginRight = margin
		}  else {
			style.marginLeft = margin
		}
		
		return style
	})
	
</script>

<style lang="scss" scoped> 
.chat-item-wrap {
	display: flex;
	margin-bottom: 40upx;
}

.message-box {
	background-color: #fff;
	padding: 20upx;
	border-radius: 10upx;
	font-size: 34upx;
}
</style>
